<!--
 * @Description: 
 * @Version: V1.0.0
 * @Author: 周艳凯 484894717@qq.com
 * @Date: 2024-10-28 11:21:45
 * @LastEditors: 周艳凯 484894717@qq.com
 * @LastEditTime: 2024-10-28 17:45:24
 * @FilePath: index.vue
 * Copyright 2024 Marvin, All Rights Reserved. 
 * 2024-10-28 11:21:45
-->
<template>
  <var-provider ref="provideRef">
    <var-button @click="change">切换主题</var-button>
    <var-button>默认按钮</var-button>
    <var-button type="primary">主要按钮</var-button>
    <var-button type="info">信息按钮</var-button>
    <var-button type="success">成功按钮</var-button>
    <var-button type="warning">警告按钮</var-button>
    <var-button type="danger">危险按钮</var-button>
    <view class="BODUS"></view>
  </var-provider>
</template>

<script setup lang="ts">
  import { ref } from 'vue';

  const provideRef = ref();

  const darkTheme = {
    'color-body': '#121212',
    'color-index-page-background': '#1e1e1e',
    'color-index-page-feature-background': '#303030',
    'color-index-page-logo-mask-background': 'linear-gradient(-45deg, #729dfc 50%, #6859f4 50%)',
    'color-index-page-second-text-color': 'rgba(255, 255, 255, .75)',
    'color-index-page-divider-color': 'rgba(84, 84, 84, .8)',
    'card-border-radius': '12px',
    'code-example-border-radius': '8px',
    'color-bar': '#1e1e1e',
    'color-text': '#fff',
    'color-sub-text': '#aaa',
    'color-border': '#333',
    'color-shadow': '#121212',
    'color-introduce-border': '#555',
    'color-primary': '#96cbfe',
    'color-link': '#A8FFC4',
    'color-type': '#A8FFC4',
    'color-loading-bar': '#5580f8',
    'color-side-bar': '#4a7afe',
    'color-side-bar-active-background': '#4a7afe1a',
    'color-app-bar': '#272727',
    'color-nav-button-hover-background': 'rgba(255, 255, 255, 0.08)',
    'color-mobile-cell-hover': '#4a7afe',
    'color-pc-language-active': '#4a7afe',
    'color-pc-language-active-background': '#4a7afe20',
    'color-mobile-language-active': '#4a7afe',
    'color-mobile-language-active-background': '#4a7afe20',
    'color-pc-theme-active': '#4a7afe',
    'color-pc-theme-active-background': '#4a7afe20',
    'color-mobile-theme-active': '#4a7afe',
    'color-mobile-theme-active-background': '#4a7afe20',
    'color-mobile-body': '#1e1e1e',
    'color-hl-background': '#272727',
    'color-hl-code': '#fff',
    'color-hl-border': '#272727',
    'color-hl-group-a': '#7c7c7c',
    'color-hl-group-b': '#96cbfe',
    'color-hl-group-c': '#ff7b1e',
    'color-hl-group-d': '#A8FFC4',
    'color-hl-group-e': '#ff7b1e',
    'color-hl-group-f': '#ff7b1e',
    'color-hl-group-g': '#ff7b1e',
    'color-hl-group-h': '#14a6e9',
    'color-hl-group-i': '#96cbfe',
  };

  let flog = false;

  // 切换主题了
  function change() {
    flog = !flog;
    provideRef.value.updateStyleVars(flog ? darkTheme : null);
  }
</script>

<style>
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
  }

  .text-area {
    display: flex;
    justify-content: center;
  }

  .title {
    font-size: 36rpx;
    color: #8f8f94;
  }

  .BODUS {
    width: 200px;
    height: 200px;
    background: var(--site-config-color-body);
    color: var(--site-config-color-text);
  }
</style>
